<template>
  <div id="mytest">
    <!-- 我的考试 -->
    <div class="content-body">
      <!-- 搜索框 -->
      <div class="search">
        <h4 style="width:10%;padding-left:10px">参加过的考试</h4>
        <el-row class="demo-autocomplete" style="width:60%;display:flex;justify-content: space-between">
          <!-- 输入框 -->
          <!-- 时期选择器 -->
          <div class="date" style="width: 350px">
             <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="——"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>   
          </div>
          <!-- 所用时长 -->
          <div class="time" >
           <el-time-picker
            is-range
            arrow-control
            v-model="value2"
            style="width:300px"
            range-separator="——"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择">
          </el-time-picker>
          </div>
          <!-- 输入名称框 -->
          <div class="input">
            <el-col :span="24">
              <el-autocomplete
                class="inline-input"
                v-model="value3"
                style="width:300px"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入考试名称"
                :trigger-on-focus="true"
                @select="handleSelect"
              ></el-autocomplete>
            </el-col>
          </div>
        </el-row>
      </div>
      <hr />
      <!-- 参与过的考试表格 -->
      <div class="table-content" >
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          border
          style="width: 100%;font-size:16px"
        >
          <el-table-column fixed align="center" prop="uuid" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="testname" label="考试名称">
          </el-table-column>
          <el-table-column align="center" prop="host" label="创建人">
          </el-table-column>
          <el-table-column align="center" prop="starttime" label="参加考试的时间">
          </el-table-column>
          <el-table-column align="center" prop="hours" label="所用时长">
          </el-table-column>
          <el-table-column align="center" prop="score" label="分数">
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="primary"
                size="small"
                align="center"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页处理 -->
      <div class="content-footer">
        <el-pagination
          background
          :page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :current-page="currentPage"
          layout="total,sizes, prev, pager, next,jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="upChange"
          @next-click="nextChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页数据
      pageSize: 5, // 一个的数据条数
      currentPage: 1, // 当前页从哪页开始
      total: 100, // 设置总数
      // 用户输入框绑定数据
      value3: "",
      // 参加考试日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      value1: '',
      // 考试所用时长范围
      value2: [new Date(2016, 9, 10, 0, 0), new Date(2022, 9, 10,0 , 0)],
      // 表格数据
      tableData: [
        {
          uuid: "01",
          testname: "JAVA",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "02",
          testname: "HTML",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "03",
          testname: "CSS",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "04",
          testname: "DOM",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "05",
          testname: "BOM",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "06",
          testname: "JS",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "07",
          testname: "事件",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "08",
          testname: "面向对象",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "09",
          testname: "jQuery",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "10",
          testname: "ajax",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "11",
          testname: "es6",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "12",
          testname: "Vue",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "13",
          testname: "Java基础",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "14",
          testname: "Java进阶",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
        {
          uuid: "15",
          testname: "js进阶",
          host: "Nancy",
          starttime: "2022-10-11",
          hours: "90分钟",
          score: "88",
        },
      ],
    };
  },
  methods: {
    // 点击详情跳转
    handleClick(row) {
      console.log(row);
      this.$router.push({ path: "/student/testdetail" });
    },
    // 分页处理
    //改变每页显示的数量
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      this.pageSize = val;
      this.currentPage = 1;
    },
    //更改页码
    handleCurrentChange(val) {
      console.log(`当前页${val}条`);
      this.currentPage = val;
    },
    //上一页
    upChange(val) {
      console.log(val);
      this.currentPage -= 1; //动态改变
    },
    //下一页
    nextChange(val) {
      this.currentPage += 1; //动态改变
    },

    // 模糊查询
    
    
  },
};
</script>

<style lang="less" scoped>
#mytest {
  background-color: #f0f2f5;
  width: 100%;
}
.content-body {
  margin: 0 auto;
  width: 90%;
  height: 817px;
  background-color: #fff;
  padding: 30px;
  margin-top:110px;
  box-sizing: border-box;
}
.table-content{
  margin: 0,auto;
  padding: 30px;
  height: 550px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 20px;
  }
.table-content::-webkit-scrollbar {
  display: none;
 }
.search {
  height: 70px;
  width: 100%;
  line-height: 70px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.content-footer {
  padding: 20px;
  box-sizing: border-box;
  position: fixed;
  bottom:25px;
  right: 120px;
}
</style>